<template>
  <view class="courseEvaluateCont">
    <fl-navBar
      dark
      :border="false"
      title="听课评价"
      left-icon="left"
      color="#333333"
      :fixed="true"
      background-color="#fff"
      status-bar
    />
    <fl-tabs :current="current" @tabsChange="tabsChange" :list="list" />
    <!-- <view class="filter_data">
      <view class="filter_item">
        <zxz-uni-data-select
          :clear="false"
          placeholder="月份"
          v-model="queryParams.month"
          :localdata="range"
        />
      </view>
      <view class="filter_item">
        <zxz-uni-data-select
          :clear="false"
          placeholder="周"
          v-model="queryParams.week"
          :localdata="range"
        />
      </view>
    </view> -->
    <view class="courseEvaluateList">
      <!-- 待接收 -->
      <received :queryParams="queryParams" v-if="current == 0" />
      <!-- 进行中 -->
      <doing :queryParams="queryParams" v-if="current == 1" />
      <!-- 已完成 -->
      <success :queryParams="queryParams" v-if="current == 2" />
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import received from "@/pages/courseEvaluateCont/received";
import doing from "@/pages/courseEvaluateCont/doing";
import success from "@/pages/courseEvaluateCont/success";
const current = ref(0);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const range = [
  { value: 0, text: "篮球" },
  { value: 1, text: "足球" },
  { value: 2, text: "游泳" },
];
const list = ref([
  {
    id: 0,
    name: "待接收",
  },
  {
    id: 1,
    name: "进行中",
  },
  {
    id: 2,
    name: "已完成",
  },

]);
function tabsChange(index) {
  current.value = index;
}
</script>

<style lang="scss">
.courseEvaluateCont {
  display: flex;
  height: 100%;
  flex-direction: column;
  .filter_data {
    display: flex;
    justify-content: space-around;
    background-color: #ffffff;
    height: 120rpx;
    .filter_item {
      display: flex;
      align-items: center;
      width: 40%;
    }
  }
  .courseEvaluateList {
    height: 100%;
    flex: 1;
    overflow: hidden;
    // background-color: #f7f7f7;
  }
}
</style>
